<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<link rel="stylesheet" href="${ctx}/css/sapar.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/sapar.js"></script>
<script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/mask.js"></script>
<title>通用包</title>
<style type="text/css">
	.table-box input[type=text]  {
	  width: 150px;
	  height: 28px;
	  border-width: 1px;
	  border-style: solid;
	  border-left-color: #c5c5c5;
	  border-top-color: #c5c5c5;
	  border-right-color: #e0e0e0;
	  border-bottom-color: #e0e0e0;
	  *line-height: 28px;
	  outline: none;
	  /* background:url(../img/skin_/inputbg.png);*/
	  padding: 0 10px;
	}
	.table-box .iselect-wrapper{
		float: left;
		margin-right: 5px;
		width: 150px;
	}
	.table-box .iselect-wrapper .iselect{
		width:150px;
	}
</style>
</head>
<body>
<div id="mask" class="mask"></div>
    <div id="saper-container">
        <div id="saper-hd"></div>
        <div id="saper-bd">
            <div class="subfiled clearfix">
                <h2>申请信息</h2>
            </div>
            <form class="saper-form" id="dataForm">
            <div class="subfiled-content"> 
                <!--表格开始-->
                <div class="table">
                    <!--表格操作-->
                    <div class="table-operate ue-clear">
                   	    <a href="javascript:;" class="add">添加行</a>
                    	<a href="javascript:;" class="save">保存申请</a>
                    </div>
                    <!--表格具体内容-->
                    <div class="table-box">
                        <table>
                            <thead>
                                <tr>
                                    <th>通用包名称</th>
                                    <th>通用包数量</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                               <tr class="row" id="option0" style="text-align: center;">
                               		<td>
                               			<select name="productId" id="productId0" onchange="signPro('0')" style="width:273px;height:30px">
                               				<option value="">请选择</option>
                               				<c:if test="${proList != null}">
				                            	<c:forEach items="${proList}" var="pro">
				                                	<option value="${pro.packageId}">${pro.packageName}</option>
				                                </c:forEach>
			                                </c:if>
                               			</select><span class="impInfo">必选</span>
                               		</td>
                               		<td><input type="text" placeholder="物品数量" name="productNum" maxlength="3" onkeyup="this.value=this.value.replace(/\D/g,'')"/><span class="impInfo">必填</span></td>
                               		<td><input type="hidden" name="productName" id="productName0" value=""/></td>
                               </tr> 
                            </tbody>
                        </table>
                    </div>
                </div><!--表格结束-->
                
            </div>
            </form>
        </div>
        <div id="saper-ft"></div>
    </div>
</body>

<script type="text/javascript">
var proJson = eval('${proJson}');
var tbLen = $(".table-box tbody").length;

$(function(){
	$(".add").click(function(){
		tbLen ++;
		console.log(tbLen);
		var str = "";
		str +="<tr id='option"+(tbLen)+"' class='row'>";
		str +="<td>";
		str +="<select name=\"productId\" style=\"width:175px;height:30px\" id=\"productId"+tbLen+"\" onchange=\"signPro('"+tbLen+"')\">";
		str +="<option value=\"\">请选择</option>";	
		for(var i = 0; i<proJson.length;i++){
			str+="<option value=\""+proJson[i].packageId+"\">"+proJson[i].packageName+"</option>"; 
		}
		str +="</select><span class=\"impInfo\">必选</span>";
		str +="</td>";
		str +="<td><input type=\"text\" placeholder=\"物品数量\" name=\"productNum\" maxlength=\"3\" onkeyup='this.value=this.value.replace(/\\D/g,\"\")'/><span class=\"impInfo\">必填</span></td>";
		str +="<td><a href=\"javascript:;\" onclick=\"del('option"+(tbLen)+"')\">删除</a><input type=\"hidden\" name=\"productName\" id=\"productName"+(tbLen)+"\" value=\"\"/></td>";
		str +="</tr>";
		console.log(str);
		$(".table-box tbody").append(str);
		$('select').iSelect();
	});
	
	$(".save").click(function(){
		 var btn = true;
		 $(".row input").each(function(){
			 if($(this).val() == ''){
				 btn = false;
				 layer.msg("必填项不为空");
				 return false;
			 }
		 });
		 $("select").each(function(){
			 if($(this).val() == ''){
				 btn = false;
				 layer.msg("必选项不为空");
				 return false;
			 }
		 });
		 if(btn){
			 showMask();
			 $.ajax({
	             type: "POST",
	             url:"${ctx}/shoushubao/shoushubaoApplySave.do",
	             data:$('#dataForm').serialize(),// 你的formid
	             error: function(request) {
	            	 	layer.alert("网络故障，请稍后再试!");
	             },
	             success: function(data) {
	            	 $("#mask").hide();
	 	           	if(data.status=="true"){
		 	           	layer.alert("保存成功", function(){
		 	           		window.location.href="${ctx}/shoushubao/shoushubaoList.do";
	           		    });
	 	           	}else{
	 	           		 layer.msg(data.msg);
	 	           	}
	             }
	         }); 
		 }
	});
	
	
});

function signPro(i){
	$("#productName"+i).val($("#productId"+i).find("option:selected").text());
}

function del(id){
	$("#"+id).remove();  
}
</script>
</html>